<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>基地管理</el-breadcrumb-item>
      <el-breadcrumb-item>投入品分类管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 标题添加区域 -->
      <el-row
        class="globalHeader"
        style="margin-bottom: 20px; padding-bottom: 45px"
      >
        <el-col :span="4">
          <i class="el-icon-s-custom"></i>
          <span>投入品分类管理</span>
        </el-col>
        <el-col style="width:125px;float:right">
          <el-button
            type="primary"
            @click="addDialogVisible = true"
            >添加一级分类</el-button
          >
        </el-col>
      </el-row>

      <!-- 一级分类列表区域 -->
      <el-table :data="inputs1list" border stripe>
        >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="typeOne" label="分类名称"></el-table-column>
        <el-table-column label="分类等级">一级</el-table-column>
        <el-table-column label="操作" width="500">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="small"
              @click="showEdit(scope.row.id, 1)"
              >修改</el-button
            >
            <!-- 查看耳机分类按钮 -->
            <el-button
              type="success"
              icon="el-icon-s-tools"
              size="small"
              @click="getList(scope.row.id, 2)"
              >查看二级</el-button
            >
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="remove(scope.row.id, 1)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalOne"
      >
      </el-pagination>
    </el-card>

    <!-- 添加一级分类 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addDialogVisible"
      width="30%"
      @close="addClosed"
    >
      <el-form ref="addRef" :model="addOne" label-position="top" :rules="Rules">
        <el-form-item label="分类名称"  prop="name">
          <el-input
            v-model="addOne.typeOne"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Add(1)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改一级分类 -->
    <el-dialog
      title="修改分类"
      :visible.sync="editDialogVisible"
      width="30%"
      @close="editClosed"
    >
      <el-form ref="editRef" :model="editOne" label-position="top" :rules="Rules">
        <el-form-item label="分类名称" prop="name">
          <el-input
            v-model="editOne.typeOne"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Edit(1)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 展示二级面板 -->
    <el-dialog title="二级分类" :visible.sync="twoDialogVisible" width="75%">
      <!-- 二级分类列表区域 -->
      <el-table :data="inputs2list" border stripe>
        >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="typeTwo" label="分类名称"></el-table-column>
        <el-table-column label="分类等级">二级</el-table-column>
        <el-table-column label="操作" width="500">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="small"
              @click="showEdit(scope.row.id, 2)"
              >修改</el-button
            >
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="remove(scope.row.id, 2)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="pageInfo2.pagenum"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="pageInfo2.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalTwo"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="addDialogVisible2 = true"
          >添加二级分类</el-button
        >
        <el-button @click="twoDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 添加二级分类 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addDialogVisible2"
      width="30%"
      @close="addClosed2"
    >
      <el-form ref="add2Ref" :model="addTwo" label-position="top" :rules="Rules">
        <el-form-item label="分类名称" prop="name">
          <el-input
            v-model="addTwo.typeTwo"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="Add(2)">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改二级分类 -->
    <el-dialog
      title="修改分类"
      :visible.sync="editDialogVisible2"
      width="30%"
      @close="editClosed"
    >
      <el-form
        ref="editRef"
        :model="editTwo"
        label-position="top"
        :rules="Rules"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input
            v-model="editTwo.typeTwo"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="Edit(2)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 基地编号
      baseId: this.$store.state.baseId,

      // 一级分页信息
      pageInfo: {
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 4,
      },

      // 二级分页信息
      pageInfo2: {
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 4,
      },

      // 总条数
      totalOne: 0,
      totalTwo: 0,
      // 添加一级数据
      addOne: {
        // 类型名称
        typeOne: '',
        // 基地ID
        baseId: '',
      },

      // 修改一级数据
      editOne: {
        // 一级分类id
        id: '',
        // 类型名称
        typeOne: '',
        // 基地ID
        baseId: '',
      },

      // 修改一级数据
      editTwo: {
        // 一级分类id
        id: '',
        // 类型名称
        typeTwo: '',
      },

      // 添加二级数据
      addTwo: {
        typeTwo: ' ',
        firstLevelId: ' ',
      },

      // 获取一级列表参数
      oneC: {
        baseId: '',
      },

      // 获取二级列表参数
      twoC: {
        firstLevelId: ' ',
      },

      // 一级分页列表
      inputs1list: [],

      // 二级分页列表
      inputs2list: [],

      Rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          {
            min: 2,
            max: 10,
            message: '名称的长度在2~10个字符之间',
            trigger: 'blur',
          },
        ],
      },

      // 控制添加面板的显示与隐藏
      addDialogVisible: false,

      // 控制添加面板的显示与隐藏
      addDialogVisible2: false,

      // 控制修改面板的显示与隐藏
      editDialogVisible: false,

      // 控制修改面板的显示与隐藏
      editDialogVisible2: false,

      // 展示二级面板的显示与隐藏
      twoDialogVisible: false,
    }
  },
  created() {
    this.getList(' ', 1)
  },
  methods: {
    /* 监视添加表单，关闭刷新表单 */
    addClosed() {
      this.$refs.addRef.resetFields()
      this.addOne.typeOne = ''
      this.getList('', 1)
    },

    /* 监视添加表单，关闭刷新表单 */
    addClosed2() {
      this.$refs.add2Ref.resetFields()
      this.addTwo.typeTwo = ''
      //   this.getList('', 2)
    },

    /*  一级监视修改表单，关闭刷新表单 */
    editClosed() {
      this.$refs.editRef.resetFields()
      this.editOne.typeOne = ''
      this.getList('', 1)
    },

    /*  二级监视修改表单，关闭刷新表单 */
    editClosed2() {
      this.$refs.editRef.resetFields()
      this.editOne.typeOne = ''
      this.getList('', 1)
    },

    /* 获取分类列表 */
    async getList(id, type) {
      let list = this.oneC
      let Url = `/inputcategory/search/${this.pageInfo.pagenum}/${this.pageInfo.pagesize}`
      if (type === 2) {
        Url = `/inputcategoryinter/search/${this.pageInfo2.pagenum}/${this.pageInfo2.pagesize}`
        list = this.twoC
        if (id === '') {
          id = this.twoC.firstLevelId
        }
        this.twoC.firstLevelId = id
      }
      this.oneC.baseId = this.baseId
      const { data: res } = await this.$http.post(Url, list)
      console.log(res)
      if (res.code !== 20000) {
        return this.$message.error('获取分类失败！！')
      }
      if (type === 1) {
        this.inputs1list = res.data.rows
        this.totalOne = res.data.total
      }
      if (type === 2) {
        this.inputs2list = res.data.rows
        console.log(this.inputs2list)
        this.totalTwo = res.data.total
        this.twoDialogVisible = true
      }
    },

    // 监听pagesize(每页显示条数)改变事件
    handleSizeChange(newSize) {
      this.pageInfo.pagesize = newSize
      this.getList('', 1)
    },

    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.pageInfo.pagenum = newPage
      this.getList('', 1)
    },

    // 2监听pagesize(每页显示条数)改变事件
    handleSizeChange2(newSize) {
      this.pageInfo2.pagesize = newSize
      this.getList('', 2)
    },

    // 2监听页码值改变的事件
    handleCurrentChange2(newPage) {
      this.pageInfo2.pagenum = newPage
      this.getList('', 2)
    },

    /* 删除 */
    async remove(id, type) {
      // 弹框询问是否删除数据
      // 前提：在elementUI中挂载confirm
      // （提示消息，标题文本，｛确认按钮的文本，取消按钮的文本，提示的类型｝）
      const confirmResult = await this.$confirm(
        '此操作将永久删除该分类, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
        // .catch 用于捕获错误返回给confirmResult
      ).catch((err) => {
        return err
      })
      // 如果确认删除，则返回值为字符串 confirm
      // 如果取消了删除， 则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        // this.$message.info: 灰色提示框
        return this.$message.info('已取消删除')
      }
      let Url = '/inputcategory/'
      if (type === 2) {
        Url = '/inputcategoryinter/'
      }
      const { data: res } = await this.$http.delete(Url + id)
      if (res.code !== 20000) {
        return this.$message.error('删除失败')
      }
      this.$message.success('删除成功！！')
      if (type === 1) {
        this.getList('', 1)
      }
      if (type === 2) {
        this.getList('', 2)
      }
    },

    /* 增加分类 */
    async Add(type) {
      // 默认输入为一级分类
      let Url = '/inputcategory'
      // 默认输入表单为一级分类表单
      var list = this.addOne
      // 传入数据为2 为添加二级分类
      if (type === 2) {
        Url = '/inputcategoryinter'
        this.addTwo.firstLevelId = this.twoC.firstLevelId
        list = this.addTwo
      }
      this.addOne.baseId = this.baseId
      console.log(list)
      const { data: res } = await this.$http.post(Url, list)
      if (res.code !== 20000) {
        return this.$message.error('增加分类失败！！')
      }
      if (type === 1) {
        this.addDialogVisible = false
        this.getList('', 1)
      }
      if (type === 2) {
        this.addDialogVisible2 = false
        this.getList('', 2)
      }
    },

    /* 显示修改面板 */
    async showEdit(id, type) {
      // 默认输入一级分类
      let Url = '/inputcategory/'
      var list = {}
      if (type === 2) {
        Url = '/inputcategoryinter/'
      }
      const { data: res } = await this.$http.get(Url + id)
      console.log(res)
      if (res.code !== 20000) {
        return this.$message.error('获取当前信息失败！！')
      }
      if (type === 1) {
        this.editOne = res.data
        this.editDialogVisible = true
      }
      if (type === 2) {
        this.editTwo = res.data
        this.editDialogVisible2 = true
      }
    },

    /* 修改分类信息 */
    async Edit(type) {
      // 默认输入一级分类
      let Url = '/inputcategory/'
      var list = this.editOne
      let id = this.editOne.id
      if (type === 2) {
        list = this.editTwo
        Url = '/inputcategoryinter/'
        id = this.editTwo.id
      }
      console.log(list)
      const { data: res } = await this.$http.put(Url + id, list)
      console.log(res)
      if (res.code !== 20000) {
        return this.$message.error('修改信息失败！！')
      }
      if (type === 1) {
        this.getList('', 1)
        this.editDialogVisible = false
      }
      if (type === 2) {
        this.getList('', 2)
        this.editDialogVisible2 = false
      }
    },
  },
}
</script>

<style>
</style>